<template>
  <div class="line" :class="showV ? 'pointer' : ''" @click="changeVisible"
    :style="isBgColor ? 'background: #fafafa' : ''">
    <span class="title" v-if="title">{{ title }}</span>
    <span class="title" v-else>
      <slot></slot>
    </span>
    <slot name="button"></slot>
    <a-icon v-if="showV && !visible" class="icon" type="down" />
    <a-icon v-if="showV && visible" class="icon" type="up" />
  </div>
</template>
<script>
export default {
  name: "titleLine",
  props: {
    /**
     * 是否有背景颜色
     */
    isBgColor: {
      type: Boolean,
      default: true,
    },
    /**
     * 标题文字
     */
    title: {
      type: String,
      default: "",
    },
    /**
     * 是否需要展开收起功能
     */
    showV: {
      type: Boolean,
      default: false,
    },
    /**
     * true 展开，false 收起
     */
    visible: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    changeVisible() {
      if (!this.showV) return;
      this.$emit("changeVisible", !this.visible);
    },
  },
};
</script>
<style lang="less" scoped>
@border-color: #1890ff;

.line {
  position: relative;

  // background: #fafafa;
  .title {
    line-height: 1.3;
    font-size: 14px;
    font-weight: bold;
    border-left: 5px solid @border-color;
    margin-bottom: 10px;
    position: relative;
    padding: 0 10px;
    //top: 1px;
    //border: 1px solid @border-color;
    //border-bottom: 1px solid transparent;
    //line-height: 30px;
    display: inline-block;
    //padding: 0 17px;
    /* background: #ffffff; */
    //color: @border-color;
    //font-weight: bold;
  }

  .icon {
    position: absolute;
    right: 4px;
    font-size: 14px;
    top: 50%;
    margin-top: -7px;
  }
}

.pointer {
  cursor: pointer;
}
</style>